<template>
  <div class="products-item" :class="{ active: props.isActive }">
    <span>{{ props.data.productionName }}</span>
    <div class="buy-btn" v-if="props.isActive">
      <span @click="toBuy(props.data.iframeURL)">购买</span>
      <span style="margin: 0 10px" @click="toConsole">控制台</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        productionName: 'abc'
      }
    },
    isActive: {
      type: Boolean,
      default: false
    }
  })
  const emit = defineEmits(['closeDrawer', 'setVisited'])

  const toBuy = (url: any) => {
    emit('setVisited', props.data.productionId)
    router.push({ name: 'Products', query: { url } })
    emit('closeDrawer')
  }
  const toConsole = () => {
    router.push({ name: 'Products' })
    emit('closeDrawer')
  }
</script>

<style lang="scss" scoped>
  .products-item {
    width: 280px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--el-text-color-primary);
    padding: 5px 0;

    .buy-btn {
      display: inline-block;
    }
  }
  .active {
    color: $text-color;
    background-image: linear-gradient(270deg, rgba(2, 71, 234, 0.05) 0%, rgba(2, 71, 234, 0) 100%);

    .buy-btn {
      color: $main-color;

      span {
        cursor: pointer;
      }
    }
  }
</style>
